@function rem($px) {
  @return $px / 46.875 + rem;
}
*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  background-color: #AFD3F7;
  overflow: hidden;
}
header{
  z-index: 2;
  position: fixed;
  top: 0;
  width: 100%;
  height:rem(160);
  background-color: deepskyblue;
  .imgBox{
    width: 100%;
    height: 100%;
    background-image: url('../images/title_bg.png');
    background-size: 100% rem(160);
  }
  .logBox{
    z-index: 2;
    margin: rem(-160) auto;
    width: rem(200);
    height:rem(118);
    background-image: url('../images/title_logo.png');
    -webkit-background-size:rem(200) rem(118);
    background-size:rem(200) rem(118);
  }
}



section{
  padding-top: rem(180);
  flex-grow: 1;
  .usertitle{
    width: 100%;
    height:rem(200);
    position: relative;
    .titlePhoto{
      width:rem(150);
      height:rem(150);
      margin-left: rem(20);
      position: absolute;
      top: rem(25);
      border: 1px solid yellow;
    }
    .nameDateId{
      width: rem(150);
      height: rem(150);
      border: 1px solid transparent;
      position: absolute;
      left: rem(200);
      top: rem(24);
      text-align: center;
      font-size: rem(20);
      line-height: rem(70);
      color: white;
    }
    .rechange{
      width:rem(250);
      height:rem(150);
      top:rem(44);
      right: rem(20);
      border: 1px solid transparent;
      position: absolute;
      .myDollB{
        text-align: center;
        color: white;
        font-size: rem(20);
      }
      #cz{
        width: rem(100);
        height:rem(40);
        margin-left: rem(80);
      }
    }
    background-color: #1d74ff;
    margin-bottom: rem(20);
  }
  .userInfo{
    width: 100%;
    background-color: #1d74ff;
    .padTop{
      margin-bottom: rem(20);
    }
    ul>li{
      color: white;
      list-style: none;
      padding: rem(20);
      border-bottom:1px solid #AFD3F7;
      font-size: rem(20);
      line-height: rem(50);
      height: rem(50);
      width: 100%;
      span{
        width: rem(30);
        height: rem(50);
        background-image: url('../images/more.png');
        line-height: rem(50);
        display: inline-block;
        position: absolute;
        right:rem(20);
        -webkit-background-size:rem(30) rem(50);
      }
    }
  }
  .outLogin{
    width: 100%;
    height: rem(90);
    background-color: #1d74ff;
    line-height: rem(90);
    text-align: center;
    font-size: rem(20);
    color: #ff0d26;
  }


  // anniu
  .switch {
    display: inline-block;
    position: relative;
    float: right;
    margin-right: rem(50);
    font-size: 12px;
    width: rem(40);
    height: rem(15);
    line-height: 13px; }
  .switch input {
    width: rem(40);
    height: 13px;
    position: absolute;
    z-index: 2;
    border: 0;
    background: 0 0;
    -webkit-appearance: none;
    outline: 0; }
  .switch input:before {
    content: '';
    width: rem(50);
    height: 12px;
    border: 1px solid #dfdfdf;
    background-color: #fdfdfd;
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: top;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    -webkit-transition: border .4s, background-color .4s;
    transition: border 1s, background-color 1s;
    -webkit-background-clip: content-box;
    background-clip: content-box; }
  .switch input:after {
    content: '';
    width: 10px;
    height: 11px;
    position: absolute;
    top: 1px;
    left: 0;
    border-radius: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    -webkit-transition: left .2s;
    transition: left .2s; }
  .switch input:checked:before {
    border-color: green;
    -webkit-box-shadow: green 0 0 0 16px inset;
    box-shadow: green 0 0 0 16px inset;
    background-color: green;
    transition: background-color .4s;
    -webkit-transition: background-color .4s; }
  .switch input:checked:after {
    left: 11px; }
}


.outLoging{
  width: rem(600);
  height:rem(400);
  border: 1px solid peru;
  position: absolute;
  top: rem(400);
  left:rem(80);
  background-color: white;
  .head{
    width: 100%;
    height:rem(100);
    background-image: url('../images/title_bg.png');
    -webkit-background-size:100% rem(100);
    #gb{
      width: rem(50);
      float: right;
      height:rem(50);
      background-color: red;
      border-radius: 50%;
      text-align: center;
      line-height: rem(50);
    }
  }
  .outText{
    width: 100%;
    height:rem(100);
    text-align: center;
    border: 1px solid transparent;
    font-weight: bold;
    font-size: rem(40);
    line-height: rem(100);
  }
  .buts{
    width:100%;
    height:rem(150);
    border: 1px solid transparent;
    display: flex;
    justify-content: space-around;
    img{
      margin-top: rem(50);
      width: rem(150);
      height:rem(80)
    }
  }
}




.tanCeng{
  display: none;
  text-align: center;
  z-index: 3;
  left: rem(80);
  top: rem(100);
  width: rem(600);
  height:rem(900);
  background-color: white;
  position: absolute;
  .head{
    width: rem(600);
    height:rem(90);
    background-color: transparent;
    span{
      display: inline-block;
      width: rem(50);
      height:rem(50);
      border-radius: 50%;
      background-color: red;
      color: whitesmoke;
      font-size: rem(30);
      text-align: center;
      line-height: rem(50);
      float: right;
    }
  }
  .log{
    width: rem(500);
    height:rem(350);
    border: 1px solid transparent;
    margin-left: rem(50);
    text-align: center;
    border-bottom: 1px solid deepskyblue;
    font-size: rem(15);
    .logoPic{
      width: rem(300);
      height:rem(200);
      border: 1px solid transparent;
      margin-left: rem(100);
      margin-top: rem(50);
      background-image: url('../images/service_logo.png');
      -webkit-background-size:rem(300) rem(210);
      padding-bottom: rem(20);
    }
  }
  .rwm{
    width: rem(300);
    height:rem(300);
    border: 1px solid transparent;
    margin-left: rem(150);
    background-image: url('../images/qq_group.jpg');
    -webkit-background-size:rem(300) rem(300);
  }
  .qunSize{
    font-size: rem(10);
  }
}







footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height:rem(100);
  background-color: white;
  border-top: 1px solid beige;
  text-align: center;
  .flex{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
  }
  a{
    display: inline-block;
    width: rem(40);
    height:rem(40);
    //background-color: green;
    margin-top: rem(30);
  }
  .home{
    background-image: url('../images/ico_home_active.png');
    -webkit-background-size:rem(40);
  }
  .user{
    background-image: url('../images/ico_me_active.png');
    -webkit-background-size:rem(40);
  }
}